<script setup>
import axios from 'axios';
import AddRice from '@/components/Rice/AddRice.vue';
import { onMounted, reactive, ref } from 'vue';
import { showDialog, showMsg } from './Util';
let optype = ref('new');
let title = ref('添加学生');
let list = ref([]);
function getData(){
    axios.get('/api/rice_list').then(res =>{
        console.log(res);
        if(res.data.status==200){
            list.value = res.data.data;
        }else{
            showMsg("获取数据失败",'error',2000);
        }
    })
}

function newStudent(){
    addshow.value=false;
    getData();
}
function del(id){
    showDialog({msg:'确认删除?'}).then(res=>{
        axios.delete('/api/rice_delete/'+id).then(res=>{
        console.log(res);
        if(res.data.status==200){
            getData();
        }else{
            showMsg(res.data.msg,'info',2000);
        }
    })
    })
}

function edit(id){
    //显示表单窗口
    //显示数据到窗口
   addshow.value = true;
   //list [{},{}]
   let obj = list.value.filter(item=>item.id==id);
   console.log(obj);
   student.value = obj[0];
   optype.value = 'edit';
   title.value="修改学生"

}
let student = ref({foodName:'',introduce:''});
let addshow=ref(false);
onMounted(() =>{
    getData();
})
function news(){
    addshow.value=true;
    title.value="添加学生";
}
</script>
<template>
    <AddRice :title="title"   :type="optype" :student="student" v-show="addshow"@submit="newStudent" @close="addshow=false"></AddRice>
    <div class="page">
        <div class="tool">
            <button @click="news">添加</button>
        </div>
        <ul class="list">
            <li class="title">
                <span>菜单名称</span>
                <span>介绍</span>
                <span>按钮</span>
            </li>
            <li class="item" v-for="item in list" :key="item.id">
                <span>{{ item.foodName }}</span>
                <span>{{ item.introduce }}</span>
                <span class="anniu">
                    <button @click="del(item.id)" class="ss">删除</button>
                    <button @click="edit(item.id)" class="ss">修改</button>
                </span>
            </li>
        </ul>
    </div>
</template>
<style scoped>
button{
   
    width: 60px;
    height: 30px;
    font-weight: bold;
    background-color: pink;
    color: white;
    padding-top: -20px;
}
.title>span{
    height: 40px;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding-top: 20px;
}
.list>li:hover{
    background-color: #FFFAFA ;
}
.list{
  
  margin-bottom: 20px;
   padding: 0;
   box-sizing: border-box;
   height: 200px;
}
.list>.title{
    display: grid;
    grid-template-columns: repeat(6,1fr);
}
.list>li{
   display: grid;
   grid-template-columns:repeat(6,1fr) ;
}
.item>span{
    height: 50px;
    text-align: center;
    padding-top: 30px;
}
span{
   border: #049b82 1px solid;
}
.anniu{
    display: block;
    justify-content: space-around;
    align-items: center;
}
.anniu>button{
    margin-left: 10px;
}
.anniu>button:hover{
    background-color: 	#F0FFFF ;
}
</style>